<template>
  <div class="cooks">
    <div class="header">
      <div class="is-left">
        <a-icon class="left" type="left" @click="$router.go(-1)" />
        <h2>优选膳食</h2>
      </div>
    </div>
    <div class="banner">
      <a-carousel autoplay>
        <div><img src="../assets/imgs/shipu.jpg" alt="食谱" /></div>
        <div><img src="../assets/imgs/shipu5.jpg" alt="食谱" /></div>
        <div><img src="../assets/imgs/shi.jpg" alt="食谱" /></div>
      </a-carousel>
    </div>

    <div class="menu_view">
      <!-- 左边栏菜单栏 -->
      <div class="menu_wrap" ref="menuScroll">
        <ul>
          <li
            :class="{ current: currentIndex === index }"
            v-for="(item, index) in categories"
            @click="selectMenu(index)"
            :key="index"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <!-- 右边 -->
      <div class="cooks_wrap" ref="cookScroll">
        <ul>
          <li
            v-for="(item, index) in categories"
            :key="index"
            class="cook-list"
          >
            <div class="cooks_title">
              <h3>{{ item.name }}({{ getItemProductAll(item) }})</h3>
            </div>
            <div class="cooks_detail">
              <ul>
                <li
                  v-for="(subItem, index) in item.sub_categories"
                  :key="index"
                >
                  <ul>
                    <li
                      v-for="(cook, index) in subItem.products"
                      :key="index"
                      class="products"
                      @click="showCook(cook)"
                    >
                      <img
                        :src="cook.default_image"
                        alt=""
                        :class="{ combo: cook.combo_type }"
                      />
                      <div class="cook_info" v-if="!cook.combo_type">
                        <span class="cook_name">{{ cook.name }}</span>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <cook :cook="cook" ref="cook"></cook>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import Cook from '../components/Cook.vue'
export default {

  data() {
    return {
      categories: [], //api接口的页面数据
      menuScroll: "", //左侧菜单滚动对象
      cookScroll: "", //右侧产品滚动对想
      listHeight: [], //各个区域的高度
      scrollY: 0, //// 右侧菜单当前滚动的距离
      cook:{}, //需要显示所有的菜
    };
  },
  components:{Cook},
  computed: {
    // 根据右侧滚动的位置, 确定对应的索引下标
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];

        // 判断是否在两个高度之间
        if (this.scrollY >= height1 && this.scrollY < height2) {
          return i;
        }
      }

      return 0;
    },

    pageEle() {
      return this.$refs.cookScroll.getElementsByClassName("cook_name");
    },
  },
  methods: {
    //右侧菜谱的计数
    getItemProductAll(item) {
      let count = 0;
      item.sub_categories.forEach((ele) => {
        count += ele.products.length;
      });

      return count;
    },
    //滚动实现
    initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuScroll, {
        click: true,
      });
      this.cookScroll = new BScroll(this.$refs.cookScroll, {
        probeType: 3, //使左侧的菜单栏实时跟着右侧动(1:不动2：触发不了)
        click: true,
      });
      //滚动y轴的值
      this.cookScroll.on("scroll", (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    calculateHeight() {
      let cooklist = this.$refs.cookScroll.getElementsByClassName("cook-list");
      //右侧将每个区的高度添加到数组中
      let height = 0;
      this.listHeight.push(height);

      for (let i = 0; i < cooklist.length - 1; i++) {
        let item = cooklist[i];
        // 累加
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    },
    selectMenu(index) {
      let cookList = this.$refs.cookScroll.getElementsByClassName("cook-list");

      let el = cookList[index];
      //滚动到对应元素的位置和时间
      this.cookScroll.scrollToElement(el, 250);
    },
    //显示点击的recipe
    showCook(cook){
      //设置recipe
      this.cook=cook
       // 显示recipe组件 (在父组件中调用子组件对象的方法)
      this.$refs.cook.toggleShow()
    }
  },
  mounted() {
    this.$http.get("/api/getMenu").then(
      (res) => {
        this.categories = res.data.data.categories;
        this.$nextTick(() => {
          // Dom更新后初始化滚动条
          this.initScroll();
          //计算一下各个区域的高度
          this.calculateHeight();
        });
      }
      // (err) => {}
    );
  },
};
</script>
<style lang="scss" scoped>
.cooks {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 4rem;
    background: #fff;
    padding: 15px;
    .left {
      display: flex;
      justify-content: left;
    }
    h2 {
      font-size:20px;
      display: flex;
      justify-content: center;
      margin-top:0;
    }
  }
  .banner {
    .ant-carousel /deep/ .slick-slide {
      text-align: center;
      height: 180px;
      overflow: hidden;
    }
  }
  .menu_view {
    width: 100%;
    display: flex;
    margin-top: 20px;
    box-sizing: border-box;
    overflow: hidden;
    height: calc(100% - 4rem);
    .menu_wrap {
      ul {
        li {
          height: 4rem;
          display: flex;
          align-items: center;
          padding: 10px;
        }
      }
    }
    .cooks_wrap {
      margin-top:0;
      width: 100%;
      background: #fff;
      padding: 15px;
      height: 500px;
      h3 {
        font-size: 20px;
        font-weight: bolder;
      }
      .cooks_title {
        padding-left: 15px;
      }
      .products {
        display: flex;
        img {
          height: 80px;
          padding: 7px;
          width: 6rem;
          margin-right: 20px;
        }
        .cook_info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 16px;
          .cook_name {
            font-weight: bolder;
          }
        }
      }
    }
  }
}

.current {
  background: #fff;
}
.combo {
  width: 15rem !important;
  margin: 5px;
}
</style>